<script setup>
import { useAuthStore } from '@/store/modules/auth'
import { useRouter } from 'vue-router'
// 图标组件需要自己手动引入
import {
  IconMenuFold,
  IconMenuUnfold,
  IconApps,
  IconBug,
  IconBulb,
  IconUser,
  IconBook,
  IconUserGroup,
  IconTool,
  IconSunFill,
  IconMessage
} from '@arco-design/web-vue/es/icon'
/*定义组件变量方法*/
const collapsed = ref(false)
const toggleCollapse = () => {
  collapsed.value = !collapsed.value
}
const authStore = useAuthStore()
const router = useRouter()

// 根据menu的key进行路由跳转
const handleMenuClick = (key) => {
  router.push(`${key}`)
}

// 页面路由（配合menu的key进行高亮）
const seleceedMenuItem = computed(() => {
  return [router.currentRoute.value.path]
})

// 面包屑配置
const breadcrumbRoute = computed(() => {
  const tempArr = [
    {
      path: '/home',
      lable: '首页'
    }
  ]
  return tempArr
})
</script>

<template>
  <div class="layout">
    <a-layout class="layout-my-big">
      <a-layout-sider :width="220" :collapsed="collapsed" theme="light">
        <div class="layout-logo">法盲扫</div>
        <a-menu :default-selected-keys="seleceedMenuItem" :style="{ width: '100%' }"
          :collapsed="collapsed" @menuItemClick="handleMenuClick">
          <!-- 侧边路由 start -->
          <!-- 子项：个人中心 -->
          <a-menu-item key="/home/usermsg">
            <IconUser />
            个人中心
          </a-menu-item>
          <!-- 菜单项：权限分配 -->
          <a-sub-menu key="user-menu">
            <template #title>
              <span><IconUserGroup />权限分配</span>
            </template>
            <!-- 子项：权限管理 -->
            <a-menu-item key="/home/usermanage/permi">
              <IconUserGroup />
              权限管理
            </a-menu-item>
            <!-- 子项：角色管理 -->
            <a-menu-item key="/home/usermanage/role">
              <IconUserGroup />
              角色管理
            </a-menu-item>
            <!-- 子项：用户管理 -->
            <a-menu-item key="/home/usermanage/user">
              <IconUserGroup />
              用户管理
            </a-menu-item>
          </a-sub-menu>
          <!-- 菜单项：系统管理 -->
          <a-sub-menu key="system-menu">
            <template #title>
              <span><IconTool />系统管理</span>
            </template>
            <!-- 子项：字典管理 -->
            <a-menu-item key="/home/system/dictionary">
              <IconTool />
              字典管理
            </a-menu-item>
          </a-sub-menu>
          <!-- 菜单项：消息中心 -->
          <a-sub-menu key="message">
            <template #title>
              <span><IconMessage />消息中心</span>
            </template>
            <!-- 子项：消息模板 -->
            <a-menu-item key="/home/message/msgtemplate">
              <IconMessage />
              消息模板
            </a-menu-item>
          </a-sub-menu>
          <!-- 菜单项：测试页面 -->
          <a-sub-menu key="test-menu">
            <template #title>
              <span><icon-user-group />测试页面</span>
            </template>
            <a-menu-item key="/home/test">
              <icon-tool />
              TEST1
            </a-menu-item>
            <a-menu-item key="/home/test2">
              <icon-tool />
              TEST2
            </a-menu-item>
          </a-sub-menu>
          <!-- 侧边路由 end -->
        </a-menu>
      </a-layout-sider>
      <a-layout-content>
        <a-layout-header class="top-header">
          <a-button type="outline" @click="toggleCollapse">
            <IconMenuUnfold v-if="collapsed" />
            <IconMenuFold v-else />
          </a-button>
        </a-layout-header>
        <a-layout-content>
          <router-view />
        </a-layout-content>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<style scoped>
.layout {
  height: 100%;
}

.layout-my-big {
  height: 100%;
}

.layout :deep(.arco-layout-header),
.layout :deep(.arco-layout-footer),
.layout :deep(.arco-layout-sider-children),
.layout :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}

.layout :deep(.arco-layout-header) {
  height: 64px;
  flex-direction: row;
  align-items: center;
  border-left: 1px solid rgb(235, 235, 235);
  border-bottom: 1px solid rgb(235, 235, 235);
}

.layout :deep(.arco-menu-inline-header),
.layout :deep(.arco-menu-item) {
  text-align: left;
}

.layout :deep(.arco-menu-inline-header) span svg {
  margin-right: 20px;
}

.layout-logo {
  font-size: 36px;
  height: 62px;
  line-height: 62px;
  overflow: hidden;
}

.top-header {
  width: 100%;
  margin: 0 600px 0 20px;
  height: 64px;
}
</style>
